<template>
  <div :style="{height:docHeight+'px'}">
    <a-layout>
      <a-layout-header :style="{width:'100%',}" :class="[top ? 'blue_header' : 'white_header']">
        <a-row type="flex" justify="end" :style="{marginRight:'10px'}">
          <a-col :class="{new_ant_col:!top}" :span="2" :style="{fontSize:'20px',color:'#FFFFFF'}">FAQ</a-col>
          <a-col :class="{new_ant_col:!top}" :span="2">
            <router-link to="/register">
              <button :class="[top ? 'button_white':'button_blue','btn']">注册</button>
            </router-link>
          </a-col>
        </a-row>

      </a-layout-header>
      <a-layout-content>

        <div class="banner">

          <a-carousel autoplay :style="{height:(docHeight-60)+'px',overflow:'hidden'}">
            <div><img :src="require('../assets/1.jpg')" alt="#" :style="{height:'100%',width:'100%'}"></div>
            <div><img :src="require('../assets/2.jpg')" alt="#" :style="{height:'100%',width:'100%'}"></div>
            <div><img :src="require('../assets/3.jpg')" alt="#" :style="{height:'100%',width:'100%'}"></div>
          </a-carousel>

          <div class="login_div" :style="{marginTop:-(docHeight-60)/1.2+'px'}">
            <div class="login_form">
              <div :style="{height:'60px',paddingTop:'30px'}">
                <p :style="{fontSize:'24px',textAlign:'center'}"> 疫情医院管理系统 </p>
              </div>
              <div class="login_from_input">
                <a-form :wrapper-col="wrapperCol">
                  <a-form-item v-bind="validateInfos.username" :style="{marginLeft:'20px'}">

                    <a-input v-model:value="modelRef.username" placeholder="用 户 名" class="ant-input">
                      <template #prefix>
                        <UserOutlined :style="{marginLeft:'10px'}"/>
                      </template>
                    </a-input>
                  </a-form-item>
                  <a-form-item v-bind="validateInfos.password" :style="{marginLeft:'20px'}">

                    <a-input-password v-model:value="modelRef.password" placeholder="密 码" class="ant-input">
                      <template #prefix>
                        <lock-outlined type="user" :style="{marginLeft:'10px'}"/>
                      </template>
                    </a-input-password>
                  </a-form-item>
                  <a-form-item>
                    <a-button type="primary" @click="onSubmit" class=""
                              :style="{width:'360px',height:'40px',margin:'20px'}">
                      登 录
                    </a-button>

                  </a-form-item>
                </a-form>
              </div>

            </div>
          </div>


        </div>


      </a-layout-content>
      <a-layout-footer>


      </a-layout-footer>
    </a-layout>
  </div>
</template>

<script>
import router from '@/router';
import {
  LockOutlined,
  UserOutlined,
} from '@ant-design/icons-vue';


import {reactive, toRaw} from 'vue';

import {useForm} from '@ant-design-vue/use';

export default {
  name: 'Login',
  components: {
    LockOutlined,
    UserOutlined
  },
  data() {
    return {
      docHeight: 0,
      top: true,
      value: '',
    }
  },
  setup() {
    const modelRef = reactive({
      username: '',
      password: '',
    });
    const {resetFields, validate, validateInfos} = useForm(
        modelRef,
        reactive({
          username: [
            {
              required: true,
              message: '请输入用户名',
            },
          ],
          password: [
            {
              required: true,
              message: '请输入密码',
            },
          ],
        }),
    );
    const onSubmit = e => {
      e.preventDefault();

      validate()
          .then(res => {
            router.replace("/dashborad/survey")
            console.log(res, toRaw(modelRef));
          })
          .catch(err => {
            console.log('error', err);
          });
    };
    const reset = () => {
      resetFields();
    };
    return {
      labelCol: {span: 4},
      wrapperCol: {span: 14},
      validateInfos,
      reset,
      modelRef,
      onSubmit,
    };
  },
  beforeMount() {
    this.docHeight = window.innerHeight;
    //console.log(this.docHeight)

  },
  methods: {
    handleSubmit(e) {
      e.preventDefault()
      this.$router.push("/dashborad")
      // const {
      //     form: {
      //         validateFields
      //     },
      //     Login
      // } = this
      //
      // this.loginBtn = true
      //
      // validateFields({
      //     force: true
      // }, (err, values) => {
      //     if (!err) {
      //         // console.log('login form', values)
      //         const loginParams = {
      //             ...values
      //         }
      //
      //         loginParams.username = values.username
      //         loginParams.password = values.password
      //
      //         Login(loginParams)
      //             .then(() => this.loginSuccess())
      //             .catch(err => this.requestFailed(err))
      //             .finally(() => {
      //                 this.loginBtn = false
      //             })
      //     } else {
      //         setTimeout(() => {
      //             this.loginBtn = false
      //         }, 600)
      //     }
      // })
    },
  },

};


</script>

<style scoped>
*,
html,
body {
  padding: 0;
  margin: 0;
}

/*头部样式 */
.ant-layout-header {
  min-width: 1200px;
}

.blue_header {
  background-color: rgb(41, 98, 255);
}

.white_header {
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0px -4px 8px #2c3e50;
}

.ant-form {
  width: 360px;
  height: 200px;

}

/* 按钮样式 */
.button_white {
  color: #FFFFFF;
  text-align: center;
}

.button_white:hover {
  cursor: pointer;
  background-color: #FFFFFF;
  color: rgb(41, 98, 255);
}

.btn {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  min-width: 80px;
  font-weight: 600;
  text-transform: uppercase;
  transition: all .25s ease-out;
  user-select: none;
  border: 2px solid transparent;
  border-color: #FFFFFF;
  text-align: center;
  line-height: normal;
  background-color: rgb(41, 98, 255);
  border-radius: 4px;
  width: 100%;
  height: 40px;
}

.button_blue {
  color: #FFFFFF;
  border-color: rgb(41, 98, 255);
}

.button_blue:hover {
  cursor: pointer;
}

.login_div {
  position: absolute;
  z-index: 999;
  width: 100%;
  height: 400px;
  margin: 0px auto;


}

/*登录样式表 */

.login_form {

  width: 400px;
  height: 360px;
  margin: 1px auto;
  border-radius: 10px;
  background-color: #FFFFFF;

}


.login_from_input {
  width: 100%;
  margin: 0 auto;

}

.ant-input {
  height: 40px;
  width: 360px;
  margin: 20px 0px;
}

/*登录图标 */
.ant-col-2 {
  color: #FFFFFF;
  font-size: 18px;
}

.ant-col-2:hover {
  cursor: pointer;
}

.new_ant_col {
  color: #2c3e50;
}

.logo_white {
  position: absolute;
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #FFFFFF;
}


.login-form {
  width: 100%;


}


.login_form .login_three_party {
  margin-left: 50px;
  height: 50px;
  width: 320px;
  text-align: left;
  line-height: 22px;
}

.login_form .login_three_party .item-icon {
  font-size: 24px;
  color: rgba(0, 0, 0, 0.6);
  margin-left: 16px;
  vertical-align: middle;
  cursor: pointer;
  transition: color 0.3s;
}

.login_form .login_three_party .item-icon:hover {
  color: #1890ff;
}


/**尾部样式 */


</style>